<template>
	<view class="uni_box home">
		<navbar :title='info.title?info.title:"任务详情"'>
			<view class="rvalshare" slot="right" @click="postershow=true">
				<image class="fenxiang" src="/static/img/fenxiang.png" mode="" />
			</view>
		</navbar>
		<view class="content" :style="{ background: rencolor }">
			<!-- <view class="renone">
				<view class="renitem">
					<text class="sname">剩余链接</text>
					<text class="snum">{{ info.count }}</text>
				</view>
				<view class="shuxian"></view>
				<view class="renitem">
					<text class="sname">我的推广码</text>
					<text class="snum">{{ info.my_nums }}</text>
				</view>
			</view>
			<view class="rentwo">
				<view class="renhead">
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">佣金政策</text>
				</view>
				<view class="detail-card">
					<view class="tabview">
						<view class="one_header_tab">
							{{info.title}}
						</view>
						<table class="table" width="100%">
							<tr class="tr header_tab">
								<td class="th" :class="ind==0?'oneth':'twoth'" :colspan="ind==0?'2':'1'" v-for="(i, ind) in info.yj_data" :key="ind">{{i.title}}</td>
							</tr>
							<tr class="tr" >
								<td class="th"  :colspan="ind==0?'2':'1'" v-for="(i, ind) in info.yj_data" :key="ind">{{i.value}}</td>
							</tr>
						</table>

					</view>

				</view>
				<view class="renhead" v-if="info.tip_content&&iszhan">
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">温馨提示</text>
				</view>
				<view v-if="info.tip_content&&iszhan">
					<u-parse :html="info.tip_content"></u-parse>
				</view>
				<view>
				<view class="boticon">
					<u-icon class="xiala floatingBox" name="arrow-right-double" color="rgba(29, 141, 253, 1)" size="43" style="transform: rotate(-90deg);" v-if="iszhan" @click="getzhan"></u-icon>
					<u-icon class="xiala floatingBox" name="arrow-right-double" color="rgba(29, 141, 253, 1)" size="43" style="transform: rotate(90deg);" v-if="!iszhan" @click="getzhan"></u-icon>
				</view>
				</view>
			</view> -->
			<view class="rentwo">
				<view class="renhead">
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">项目详情</text>
				</view>
				<view style="margin-bottom: 20rpx;">
					<u-parse :html="info.descript"></u-parse>
				</view>
				<view class="tuitem"  v-for="(item,index) in info.images" v-if="info.images" :key="index">
					<!-- <text class="tutit" v-if="item.name">{{item.name}}</text> -->
					<image class="tuitemimg" v-if="item" :src="item" mode="widthFix" @click.stop="previewImage(item)"  />
				</view>
			</view>
			<view class="botview">
				<view class="lianxi" @click="getchakan">
					查看TA的联系方式
				</view>
			</view>
		</view>
		<!-- <view class="botview">
			<view class="lianxi" :style="{
				background: configinfo.zhu_color
			}" @click="shenqing">
				申请推广
			</view>
		</view> -->

		<!-- 分享 -->
		<MTSharePoster :postershow="postershow" @postercancel="postershow = false" type="quan" :leitype="leitype" :posterinfo="info">
		</MTSharePoster>

		<!-- 查看联系方式 -->
		<u-popup v-model="moreshow" mode="bottom" @close="zhidao" width="82%" :closeable="true" z-index="1000">
			<view class="mpop">

				<text class="yantit">
					联系方式一览
				</text>
				<view class="pitem">
					<image class="phone" src="/static/img/phone.png" mode="" />
					<text class="nei">手机号：</text>
					<text class="neival">{{mobile||'暂无'}}</text>
					<text class="copy" @click="copy(mobile)">复制</text>
				</view>
				<view class="pitem">
					<image class="phone" src="/static/img/getwei.png" mode="" />
					<text class="nei">微信号：</text>
					<text class="neival">{{wechat||'暂无'}}</text>
					<text class="copy" @click="copy(wechat)">复制</text>
				</view>
				
				<!-- <text class="kaitit">开发中...</text>
				<text class="kaimiao">尽情期待~</text> -->
				<view class="zhidao" @click="zhidao">知道了</view>
			</view>
		</u-popup>
</view>
</template>

<script>
// #ifdef APP-PLUS
const voicdeReadSdk = uni.requireNativePlugin('xlx-voice-read-module');
// #endif
import MTSharePoster from '@/components/MTSharePoster';
export default {
	components: {
		// "MTSharePassword": MTSharePassword,
		"MTSharePoster": MTSharePoster
	},
	data() {
		return {
			rencolor: '#68B6EC',
			zhucolor: uni.getStorageSync('zhu_color'),
			infostyle:1,
			iszhan:false,
			taskDetail:{
				policy_remark:'测试测试'
			},
			id:'',
			leitype:'1',
			info:{},
			configinfo:uni.getStorageSync('configinfo'),
			yj_data:[
				{danjia:1,butie:1,zhouqi:1},
				{danjia:1,butie:1,zhouqi:1},
				{danjia:1,butie:1,zhouqi:1},
			],
			postershow: false,
			posterinfo:{},

			moreshow:false,
			mobile:'',
			wechat:""
		}
	},
	onLoad(option) {
		this.id = option.id
		if(option.leitype){
			this.leitype = option.leitype // 1首页
		}
		
		this.getDetail()
		// console.log(this.configinfo)
		
	},
	onShow() {
	},
	methods: {
		async getDetail(){
			if(this.leitype == 1){
				//首页
				let res = await this.$u.api.getDetail({
					id:this.id
				});
				this.info = res
			}else if(this.leitype == 2){
				//项目
				let res = await this.$u.api.quangetDetail({
					id:this.id
				});
				console.log(res)
				this.info = res
			}

			// #ifdef APP-PLUS
			let res = await this.$u.api.voicedata({
					
				});
			console.log(res)
		
			voicdeReadSdk.init({
				appId: res.appid,//'43516296',//渠道appId，从配置后台获取
				appSecret: res.appsecret,//'RxnMEW5hKcwJE8FvnFkJtYdl20xU6vL', //密钥，从配置后台获取
				debug: false
			});
			
			// #endif
			
			
		},
		shenqing(){
			this.navrouter("/pages_subject/twoPage/Shenqing?id="+this.info.id+'&leitype='+this.leitype);
		},
		getzhan(){
			this.iszhan = !this.iszhan
		},
		previewImage(item){
			// console.log('index', index)
			let a= []
			// let list = this.list
			a.push(item)
			uni.previewImage({
				current: item, //预览图片的下标
				urls: a//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		async getchakan(){
			// this.getshowadd()
			// return;
			// this.moreshow = true
			let res = await this.$u.api.getUserShowNums({
			});
			console.log(res)
			if(this.mobile){
				// this.mobile = resd.mobile
				// this.wechat = resd.wechat
				this.moreshow = true
				return;
			}
			if(Number(res.nums)<=0||!res.nums){
				// 查看次数不足
				// 判断广告次数
				if(res.free_gg_nums<=0||!res.free_gg_nums){
					// 广告次数不足
					// 提示查看次数不足 跳转购买
					// this.getjieshu()
					// return;
					this.$u.toast("查看次数不足,请先购买");
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/TPage/NDaoju'
						})
						// uni.switchTab({ url: '/pages/tabbar/Tabhome' })
					}, 1000);
				}else{
					// 弹出广告
						// #ifdef H5
					this.$u.toast("查看次数不足,请先购买");
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/TPage/NDaoju'
						})
						// uni.switchTab({ url: '/pages/tabbar/Tabhome' })
					}, 1000);
					// #endif
					// #ifdef APP-PLUS
					this.getshowadd()
					// #endif
					
				}
			}else{
				let resd = await this.$u.api.getLianxi({
					id:this.id
				});
				console.log(resd)
				this.mobile = resd.mobile
				this.wechat = resd.wechat
				this.moreshow = true
			}
		},
		zhidao(){
			this.moreshow = false
		},

		async getshowadd(){
				// #ifdef H5
				this.$u.toast('暂不支持浏览器操作');
				// #endif
				// #ifdef APP-PLUS
				console.log(voicdeReadSdk)
				let that = this
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩
				});
				
				let res = await this.$u.api.voicedata({
					
				});
				voicdeReadSdk.loadVoiceAd({
					resourceId: res.resource_id, //必要，资源位id
					userId: res.user_id, //可选，用于服务端回调时通知接入方给哪个用户发放奖励，不走服务端回调非必要
					mediaExtra: "", //可选，额外的透传参数，仅支持单个json对象格式，不可以嵌套json对象
					nickname: "" //可选，用户昵称
				}, result => {
					console.log("result = " + JSON.stringify(result));
					switch (result.eventType) {
						//广告加载成功(注：此时只是广告加载成功，并没有展示。如需直接展示还需调用 showVoiceAd 方法)
						case "onAdLoadSuccess":
							// preEcpm 千次展现预估收益，单次展现收益需要除1000
							this.preEcpm = result.params.preEcpm;
							break;
						// 广告加载失败
						case "onAdLoadError":
							var errorCode = result.params.errorCode;
							var errorMsg = result.params.errorMsg;
							//请务必给用户展示错误信息，方便用户反馈时排查问题
							uni.showToast({
								icon: 'none',
								title: `${errorMsg}(${errorCode})`,
								duration: 2000
							});
							break;
					} 
				})
				// 延迟2秒后关闭loading
				setTimeout(function () {
					uni.hideLoading();
					that.getshowaddtwo()
				}, 1300); 
				// #endif
				// console.log(voicdeReadSdk)
				
			},
			async getshowaddtwo(){
				// #ifdef H5
				this.$u.toast('暂不支持浏览器操作');
				
				// #endif
				// #ifdef APP-PLUS
				
				voicdeReadSdk.showVoiceAd(result => {
					console.log("result = " + JSON.stringify(result));
					switch (result.eventType) {
						case "onAdShow":
							//语音展示完成
							this.getjieshu();//完成接口
							break;
						case "onAdError":
							var errorCode = result.params.errorCode;
							// this.getshowadd()
							this.$u.toast('广告加载失败,请稍后重试');
							//广告展示失败
							break;
						case "onAdClose":
							console.log('关闭广告')
							// setTimeout(() => {
							// 	uni.navigateBack()
							// }, 1000);
							//广告关闭
							break;
						/**
						 * 奖励验证回调，开发者需要在此回调中做奖励的发放
						 * 多个奖励则会回调多次
						 */
						case "onRewardVerify":
							//requestId 当前曝光的请求id
							var requestId = result.params.requestId;
							// tagId 奖励唯一标识
							var tagId = result.params.tagId;
							//rewardAmount 当次广告媒体收益（单位元）
							var rewardAmount = result.params.rewardAmount;
							break;
					} 
					})
				// #endif
				// console.log(voicdeReadSdk)
				
			},
			async getjieshu(){
				let res = await this.$u.api.receivePropByGg({
					
				});
				console.log(res)
				this.$u.toast("领取成功");
				let resd = await this.$u.api.getLianxi({
					id:this.id
				});
				console.log(resd)
				this.mobile = resd.mobile
				this.wechat = resd.wechat
				this.moreshow = true
			}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

.content {
	background-color: #fff;
	padding-bottom: 150rpx;
	min-height: 100vh;
	padding-top: 30rpx;

	.renone {
		display: flex;
		flex-direction: row;
		position: relative;
		padding: 30rpx;
		align-items: center;

		.renitem {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.sname {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.snum {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.shuxian {
			width: 1rpx;
			height: 40rpx;
			background: #FFFFFF;
			opacity: 0.5;
		}
	}

	.rentwo {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 30rpx 30rpx;

		.renhead {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 20rpx;

			.icon_sc {
				margin-right: 6rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.yname {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
}

.botview {
	height: 120rpx;
	background: #FFFFFF;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	border-top: 1rpx solid #eee;
	padding: 30rpx;

	.botleft {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon_fenxiang {
			width: 44rpx;
			height: 44rpx;

		}

		text {
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.lianxi {
		margin-left: auto;
		width: 100%;
		height: 88rpx;
		background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.table {
  	width: 100%;
  	border-radius: 10rpx;
  	display: table;
  	border: 0.5px solid #CCC;
  	border-collapse: collapse;
  	margin-bottom: 0rpx;
  }
  
  .th {
  	text-align: center;
  	color: #FFFFFF;
  	padding: 15rpx 3px;
  	font-weight: bolder;
  	display: table-cell;
  	// background: #FFFFFF;
  	font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  	border: 0.5px solid #e4e4ee;
		width: 25%;
  }
  
  .td {
  	text-align: center;
  	background: #FFFFFF;
  	padding: 20rpx 5rpx;
  	display: table-cell;
  	border: 1px solid #e4e4ee;
  	font-size: 24rpx;
  	font-family: PingFang SC;
  	font-weight: 400;
  	color: #333;
  }
  
  .tdinput {
  	width: 120rpx;
  }
  .tabview{
    width: 100%;
  }
  .detail-card{
	margin-bottom: 40rpx;
  }
  .one_header_tab{
    width: 100%;
    background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
    border-radius:20rpx 20rpx 0 0;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(51, 51, 51, 1);
    font-size: 26rpx;
    font-weight: 500;
  }
  .header_tab{
	background-color: #eee;
  }
  .oneth{
    width: 50%;
  }
  .twoth{
    width: 25%;
  }
  .floatingBox{
	position:relative; /*设置元素脱离文档流*/
	animation: floatUpDown 2.5s ease-in-out infinite; /*设置动画，循环播放*/
	}

	/*动画部分，使用关键词@keyframes来定义动画*/
	@keyframes floatUpDown{
	0%{
		top:0; /*在起始状态时让元素位于顶部*/
	}
	50%{
		top:10px; /*在50%时让元素向下浮动20像素*/
	}
	100%{
		top:0; /*在结束状态时让元素回到原来位置*/
	}
	}
  .xiala{
    margin: 30rpx auto 30rpx;
    width: 36rpx;
    height: 32rpx;
  }
  .boticon{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .shengview{
    margin: 0px 15px 5px;
    position: relative;
    .shouyibg{
      width: 100%;
    }
    .shengitem{
      position: absolute;
      display: flex;
      flex-direction: row;
      align-items: center;
      // height: 100%;
      color: #fff;
      font-weight: 500;
      font-size: 30rpx;
      z-index: 2;
      width: 100%;
      top: 23%;
      text{
        margin-left: 15%;
        display: inline-block;
      }
    }
  }
  .rvalshare{
	position: absolute;
	right: 30rpx;
	font-size: 28rpx;
	margin-top: 14rpx;
	// #ifdef APP-PLUS
	margin-top: 4rpx;
	// #endif
	
	.fenxiang{
		width: 46rpx;
		height: 46rpx;
	}
}
.botview {
	height: 120rpx;
	background: #FFFFFF;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	border-top: 1rpx solid #eee;
	padding: 30rpx;
	.tishi{
		display: flex;
		flex-direction: column;
		margin-right: 40rpx;
		.jzhi{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1989F9;
			display: block;
			margin-bottom: 8rpx;
		}
		/deep/.u-countdown{
			font-weight: 500;
		}
	}

	.botleft {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon_fenxiang {
			width: 44rpx;
			height: 44rpx;

		}

		text {
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.lianxi {
		margin-left: auto;
		// width: 100%;
		flex: 1;
		height: 88rpx;
		background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.zhanwei {
	height: 20rpx;
	width: 100%;
	background-color: #f6f6f6;
}
.mpop{
	// padding: 50rpx 30rpx;
	// // #ifdef APP-PLUS
	// padding-top: calc(var(--status-bar-height) + 50rpx);;
	// // #endif
	background-color: #fff;
	padding: 30rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.yantit{
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		display: block;
		margin: 10rpx auto 20rpx;
		text-align: center;
	}
	.img_kfz{
		width: 368rpx;
		height: 200rpx;
		margin: 30rpx 0;
	}
	.kaitit{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #3E65E5;
	}
	.kaimiao{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #666666;
		display: block;
		margin-top: 13rpx;
	}
	.zhidao{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 98rpx;
		background: #3E65E5;
		border-radius: 20rpx;
		width: 90%;
		margin-top: 35rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.youname{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		color: #8B8B8B;
		display: block;
		text-align: center;
	}
	.yantan{
		margin: 50rpx 0 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.yanfa{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text{
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #BBBBBB;
		}
	}
	.querenben{
		height: 96rpx;
		background: #EBEBEB;
		border-radius: 48rpx;
		width: 80%;
		margin: 50rpx auto 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #A5A5A5;
	}
	.qbtns{
		background: #000000;
		color: #fff;
	}
}
.nmview{
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
}
.pitem{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 30rpx;
	.phone{
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}
	.nei{
		color: #333;
		font-weight: normal;
		font-size: 30rpx;
	}
	.neival{
		color: #333;
		font-weight: 500;
		font-size: 30rpx;
	}
	.copy{
		margin-left: 40rpx;
		padding: 4rpx 20rpx;
		background-color: #3E65E5;
		color: #fff;
		font-size: 26rpx;
		font-weight: normal;
		border-radius: 10rpx;
	}
}
.pitem:last-child{
	margin-bottom: 0;
}
</style>
